<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>
    <!-- 页面css -->
    <link rel="stylesheet" href="./css/followAdd.css" />
  </head>

  <body>
    <div class="page">
      <header class="page-header">
        <div class="page-header-nav">
          <div class="header-nav-left">
            <span class="text-color-regular margin-left-5" onclick="router.back()">Canncel</span>
          </div>
          <div class="header-nav-title">
            <h2 class="flex-1 font-size-normal text-align-center">Follow</h2>
          </div>
          <div class="header-nav-right">
            <a class="text-theme-primary margin-right-5" href="followLive.html">Next</a>
          </div>
        </div>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <div class="flex full-height">
          <div class="flex-column overflow-y-auto menu-list">
            <div class="menu-list-item active" data-name="Hot">Hot</div>
            <div class="menu-list-item" data-name="National">National</div>
            <div class="menu-list-item" data-name="EPL">EPL</div>
            <div class="menu-list-item" data-name="LaLiga">La Liga</div>
            <div class="menu-list-item" data-name="SerieA">Serie A</div>
            <div class="menu-list-item" data-name="Bundesliga">Bundesliga</div>
            <div class="menu-list-item" data-name="Ligue1">Ligue 1</div>
            <div class="menu-list-item" data-name="Europe">Europe</div>
            <div class="menu-list-item" data-name="Africa">Africa</div>
            <div class="menu-list-item" data-name="Asia">Asia</div>
            <div class="menu-list-item" data-name="America">America</div>
            <div class="menu-list-item" data-name="Oceania">Oceania</div>
          </div>

          <div class="flex-1 bg-regular overflow-y-auto list-box">
            <!-- 通用列表 -->
            <div class="container">
              <div class="row">
                <div class="col-xs-4">
                  <div class="justify-center align-center padding-10">
                    <div class="padding-10 radius-round border-base position-relative">
                      <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                      <img class="height-10 position-absolute-rightBottom" src="./images/select_icon.png" alt="" srcset="" />
                    </div>
                  </div>
                </div>
                <div class="col-xs-4">
                  <div class="justify-center align-center padding-10">
                    <div class="padding-10 radius-round border-base position-relative">
                      <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                    </div>
                  </div>
                </div>
                <div class="col-xs-4">
                  <div class="justify-center align-center padding-10">
                    <div class="padding-10 radius-round border-base position-relative">
                      <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                    </div>
                  </div>
                </div>
                <div class="col-xs-4">
                  <div class="justify-center align-center padding-10">
                    <div class="padding-10 radius-round border-base position-relative">
                      <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 地区列表（Europe） -->
            <div id="Europe" class="container display-none">
              <div class="europ-item border-bottom-base">
                <div class="padding-10 justify-between europ-item-nav">
                  <span>England</span>
                  <span class="glyphicon glyphicon-menu-right europ-item-icon"></span>
                </div>

                <div class="europ-item-list display-none">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="justify-center align-center padding-20 position-relative">
                        <div class="split-line margin-left-30 margin-right-30"></div>
                        <div class="padding-10 bg-regular text-color-secondary position-absolute-center">National</div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-sm-12">
                      <div class="justify-center align-center padding-20 position-relative">
                        <div class="split-line margin-left-30 margin-right-30"></div>
                        <div class="padding-10 bg-regular text-color-secondary position-absolute-center">EPL</div>
                      </div>
                    </div>

                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                          <img class="height-10 position-absolute-rightBottom" src="./images/select_icon.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="europ-item">
                <div class="padding-10 border-bottom-base justify-between europ-item-nav">
                  <span>Germany</span>
                  <span class="glyphicon glyphicon-menu-right europ-item-icon"></span>
                </div>

                <div class="europ-item-list display-none">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="justify-center align-center padding-20 position-relative">
                        <div class="split-line margin-left-30 margin-right-30"></div>
                        <div class="padding-10 bg-regular text-color-secondary position-absolute-center">National</div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-sm-12">
                      <div class="justify-center align-center padding-20 position-relative">
                        <div class="split-line margin-left-30 margin-right-30"></div>
                        <div class="padding-10 bg-regular text-color-secondary position-absolute-center">EPL</div>
                      </div>
                    </div>

                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                          <img class="height-10 position-absolute-rightBottom" src="./images/select_icon.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-4">
                      <div class="justify-center align-center padding-10">
                        <div class="padding-10 radius-round border-base position-relative">
                          <img class="width-height-30" src="./images/ball_park.png" alt="" srcset="" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
    <script src="./js/followAdd.js"></script>
  </body>
</html>
